<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="城市" @click-left="$router.push('/home')">
        <template #right>
          <van-popover trigger="click" placement="bottom-end" theme="dark">
            <template #reference>
              <van-icon name="ellipsis" size="30" color="black" />
            </template>
          </van-popover>
        </template>
        <template #left>
          <van-icon name="arrow-left" size="30" color="black" />
        </template>
      </van-nav-bar>
      <div class="main">
        <div class="mainOne" @click="city">选择省</div>
        <div class="mainTwo" @click="DayCity">选择市</div>
      </div>
      <div class="mainThree">
        <div class="one" v-show="flag"  v-for="(item,index) in cityList" :key="index">{{item.name}}</div>
        <div class="two" v-show='!flag' v-for="(item,index) in twoCity" :key="index">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { gohome ,sortCity} from "../api/homecaty";
export default {
  data() {
    return {
      flag: "",
      cityList:[],
      twoCity:[],
    };
  },
  methods: {
    city() {
      this.flag=true;
      gohome().then((res) => {
        console.log(res);
        this.cityList=res.data;
      });
    },
  DayCity(){
      this.flag=false;
    sortCity().then((res)=>{
      console.log(res);
      this.twoCity=res.data;
    })
  }
  },
};
</script>

<style scoped>
.main {
  display: flex;
}

.mainOne {
  width: 100px;
  height: 40px;
  margin-left: 25px;
  line-height: 40px;
  text-align: center;
  background-color: red;
}
.mainTwo {
  width: 100px;
  height: 40px;
  background-color: blue;
  margin-left: 85px;
  line-height: 40px;
  text-align: center;
}
.mainThree {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
 .mainThree .one {
  width: 0.8rem;
  height: 0.4rem;
  margin: 5px;
  text-align: center;
  background-color: red;
  line-height: 0.4rem;
}
.two {
  width: 150px;
  margin: auto;
  height: 50px;
  background-color: red;
  justify-content: space-around;
}
</style>